<template>
<div >
        <Layout>
        <!-- <Sider hide-trigger><Tree :data="data4" show-checkbox multiple></Tree></Sider> -->
        <Layout>
    <Content>
    <Button type="primary" @click="finished">已完成订单</Button>
    <Button type="primary" @click="unfinished" style="background:#ed4014;border:1px solid #ed4014">未完成订单</Button>
    <Button type="primary" @click="modalForm = true">添加数据</Button>
    <Button type="primary" @click="removes" style="background:#ed4014;border:1px solid #ed4014">删除多个</Button>


    <Table border :columns="columns" :data="data" @on-selection-change="onSelect"></Table>
    <Page :total="total" :page-size="rows" @on-change="onChangePage" :page-size-opts=[5,10,15,20] @on-page-size-change="onPageSizeChange" show-sizer />
    <Modal v-model="modalForm" title="数据操作">
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
        <FormItem label="产品名称" prop="productName">
          <Input v-model="formValidate.productName" placeholder="产品名称"></Input>
        </FormItem>
        <FormItem label="订单编号" prop="productSn">
          <Input v-model="formValidate.productSn" placeholder="订单编号"></Input>
        </FormItem>
        <FormItem label="店铺ID" prop="shopId">
          <Input v-model="formValidate.shopId" placeholder="店铺ID"></Input>
        </FormItem>
        <FormItem label="订单状态" prop="orderStatus">
          <Select v-model="formValidate.orderStatus" clearable style="width:408px">
        <Option v-for="item in status" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
          <!-- <Input v-model="formValidate.orderStatus" placeholder="订单状态"></Input> -->
        </FormItem>
        <FormItem label="订单总价" prop="totalPrices">
          <Input v-model="formValidate.totalPrices" placeholder="订单总价"></Input>
        </FormItem>
        <FormItem label="支付方式" prop="payType">
         <Select v-model="formValidate.payType" clearable style="width:408px">
        <Option v-for="item in cityList" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
          <!-- <Input v-model="formValidate.payType" placeholder="支付方式" style="width:392px"></Input> -->
        </FormItem>
         <FormItem label="配送方式" prop="deliverType">
         <Select v-model="formValidate.deliverType" clearable style="width:408px">
        <Option v-for="item in getWay" :value="item.value" :key="item.value">{{ item.label }}</Option>
        </Select>
          <!-- <Input v-model="formValidate.deliverType" placeholder="配送方式" style="width:392px"></Input> -->
        </FormItem>
          <FormItem label="用户电话" prop="userTel">
          <Input v-model="formValidate.userTel" placeholder="用户电话"></Input>
        </FormItem>
          <FormItem label="用户地址" prop="userAddress">
          <Input v-model="formValidate.userAddress" placeholder="用户地址" ></Input>
        </FormItem>
         <FormItem label="订单备注" prop="orderRemarks">
          <Input v-model="formValidate.orderRemarks" placeholder="订单备注"></Input>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="handleSubmit('formValidate')">Submit</Button>
          <Button @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
        </FormItem>
      </Form>
      <div slot="footer">
        我就不显示按钮
      </div>
    </Modal>
   </Content>

 </Layout>
 </Layout>

</div>



</template>
<script>
import Base from '../../base/Base';
export default {
  mixins: [Base],
  data() {
    return {
             status: [
                    {
                        value: '已完成订单',
                        label: '已完成订单'
                    },
                    {
                        value: '未完成订单',
                        label: '未完成订单'
                    },
                    // {
                    //     value: '支付成功',
                    //     label: '支付成功'
                    // },
                    // {
                    //     value: '商品出库',
                    //     label: '商品出库'
                    // },
                    // {
                    //     value: '正在配送',
                    //     label: '正在配送'
                    // },
                    // {
                    //     value: '等待收货',
                    //     label: '等待收货'
                    // },
                    //  {
                    //     value: '收货成功',
                    //     label: '收货成功'
                    // }
                ],

                cityList: [
                    {
                        value: '银行卡支付',
                        label: '银行卡支付'
                    },
                    {
                        value: '支付宝支付',
                        label: '支付宝支付'
                    },
                    {
                        value: '微信支付',
                        label: '微信支付'
                    },
                    {
                        value: '信用卡支付',
                        label: '信用卡支付'
                    },
                    {
                        value: '找人代付',
                        label: '找人代付'
                    },
                    {
                        value: '货到付款',
                        label: '货到付款'
                    }
                ],

                getWay: [
                    {
                        value: '顺丰快递',
                        label: '顺丰快递'
                    },
                    {
                        value: '圆通快递',
                        label: '圆通快递'
                    },
                    {
                        value: '中通快递',
                        label: '中通快递'
                    },
                    {
                        value: '百世快递',
                        label: '百世快递'
                    },
                    {
                        value: '中国邮政',
                        label: '中国邮政'
                    },
                    {
                        value: '德邦快递',
                        label: '德邦快递'
                    }
                ],

              //  data4: [
              //          {
              //           title: '订单管理',
              //           expand: true,
              //           selected: true,
              //           children:
              //           [
              //             {
              //               type:'date',
              //               title: '已完成订单',
              //               expand: true,
              //             },
              //             {
              //               type:'date',
              //               title: '未完成订单',
              //               expand: true,
              //             },
              //           ]
              //          }
              //        ],

      module      : 'order',
      formValidate: {
        name    : '',
        password: ''
      },
      ruleValidate: {
       productName: [
          {
            required: true,
            message : '产品名称',
            trigger : 'blur'
          }
        ],
       productSn: [
          {
            required: true,
            message : '订单编号',
            trigger : 'blur'
          }
        ],
           shopId: [
          {
            required: true,
            message : '店铺ID',
            trigger : 'blur'
          }
        ],
        orderStatus: [
          {
            required: true,
            message : '订单状态',
            trigger : 'blur'
          }
        ],
         totalPrices: [
          {
            required: true,
            message : '订单总价',
            trigger : 'blur'
          }
        ],
        payType: [
          {
            required: true,
            message : '支付方式',
            trigger : 'blur'
          }
        ],
           deliverType: [
          {
            required: true,
            message : '配送方式',
            trigger : 'blur'
          }
        ],
        userTel: [
          {
            required: true,
            message : '用户电话',
            trigger : 'blur'
          }
        ],
        userAddress: [
          {
            required: true,
            message : '用户地址',
            trigger : 'blur'
          }
        ],
        orderRemarks: [
          {
            required: true,
            message : '订单备注',
            trigger : 'blur'
          }
        ],
      },

      columns: [
        {
          type : 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '产品名称',
          key  : 'productName'
        },
        {
          title: '订单编号',
          key  : 'productSn'
        },
        {
          title: '店铺ID',
          key  : 'shopId'
        },
        {
          title: '订单状态',
          key  : 'orderStatus'
        },{
          title: '订单总价格',
          key  : 'totalPrices'
        },
        {
          title: '支付方式',
          key  : 'payType'
        },{
          title: '配送方式',
          key  : 'deliverType'
        },
        {
          title: '用户电话',
          key  : 'userTel'
        },
        {
          title: '用户地址',
          key  : 'userAddress'
        },
        {
          title: '订单备注',
          key  : 'orderRemarks'
        },

        {
          title : '操作',
          key   : 'action',
          width : 150,
          align : 'center',
          render: (h, params) => {
            return h('div', [
              h(
                'Button',
                {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.edit(params.row._id);
                    }
                  }
                },
                '修改'
              ),
              h(
                'Button',
                {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.remove(params.row._id);
                    }
                  }
                },
                '删除'
              )
            ]);
          }
        },

      ]
    }
  },
    methods:{
              finished(){
                        this.axios({
                            url   : `http://10.31.162.52:3000/order/list/`,
                            method: 'post',
                            data  : {orderStatus:"已完成订单"},
                        }).then(res => {
                          // console.log(res.data);
                                // this.modalForm = false;
                                this.total = res.data.total;
                                this.data  = res.data.rows;
                                // this.getData();
                        });
                   }
             },
              unfinished(){
                        this.axios({
                            url   : `http://10.31.162.52:3000/order/list/`,
                            method: 'post',
                            data  : {orderStatus:"未完成订单"},
                        }).then(res => {
                          // console.log(res.data);
                            // this.modalForm = false;
                            this.total = res.data.total;
                            this.data  = res.data.rows;
                            // this.getData();
                        });
                   }
             }




</script>




<style>
.ivu-layout-sider{background :white;
};

</style>